<template>
  <div>
    <div class="memberBasicInfo">
      <div class="icon-pnameIcon">
        <img id="memberHeadPic" src="../img/tx1.png">
      </div>
      <span class="memberName">{{this.name.name}}</span>
      <span class="memberLevelName">普通会员</span>
    </div>
    <div>
      <router-link to="/order">
        <div class="myMallOrderLine">
          <span style="margin-left: 30px;">我的订单</span>
          <span style="float: right; margin-right: 15px; font-size: 23px;">&gt;</span>
        </div>
      </router-link>
      <div class="myMallOrderDiviceLine">
        <div class="mallOrderDiviceItem">
          <a class="mallOrderDiviceItemLink">
            <i class="iconfont icon-coupons_fill"></i>
            <div class="mallItemText">待付款</div>
          </a>
        </div>
        <div class="mallOrderDiviceItem">
          <a class="mallOrderDiviceItemLink">
            <i class="iconfont icon-shielding_fill"></i>
            <div class="mallItemText">待发货</div>
          </a>
        </div>
        <div class="mallOrderDiviceItem">
          <a class="mallOrderDiviceItemLink">
            <i class="iconfont icon-marketing_fill"></i>
            <div class="mallItemText">待收货</div>
          </a>
        </div>
        <div class="mallOrderDiviceItem">
          <a class="mallOrderDiviceItemLink">
            <i class="iconfont icon-tasklist_fill"></i>
            <div class="mallItemText">已收货</div>
          </a>
        </div>
        <div class="mallOrderDiviceItem">
          <a class="mallOrderDiviceItemLink">
            <i class="iconfont icon-computer_fill"></i>
            <div class="mallItemText">售后</div>
          </a>
        </div>
      </div>
      <div class="conbox">
        <router-link to="/consignee">
          <div class="consigneeInfo">
            <div class="itemName">
              <i class="iconfont icon-addressbook_fill"></i>
              <span>收货人信息</span>
            </div>
            <span class="xq">&gt;</span>
          </div>
        </router-link>
        <router-link to="/collect">
          <div class="consigneeInfo">
            <div class="itemName">
              <i class="iconfont icon-collection_fill"></i>
              <span>我的收藏</span>
            </div>
            <span class="xq">&gt;</span>
          </div>
        </router-link>
        <router-link to="/mine">
          <div class="consigneeInfo">
            <div class="itemName">
              <i class="iconfont icon-people_fill"></i>
              <span>个人资料</span>
            </div>
            <span class="xq">&gt;</span>
          </div>
        </router-link>
        <router-link to="/password">
          <div class="consigneeInfo">
            <div class="itemName">
              <i class="iconfont icon-unlock_fill"></i>
              <span>修改密码</span>
            </div>
            <span class="xq">&gt;</span>
          </div>
        </router-link>
      </div>
      <div class="consignee" @click="outBtn">
        <div class="itemName">
          <i class="iconfont icon-setup_fill"></i>
          <span>退出当前登录</span>
        </div>
        <span class="xq">&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import session from "../util/session.js";
export default {
  data() {
    return {
      name: {}
    };
  },
  mounted() {
    this.name = session.get();
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false;
    },
    outBtn() {
      MessageBox.confirm("你确定要退出吗").then(action => {
        session.clear();
        this.$router.push("/login");
      });
      // if (!confirm("你确定要退出吗")) {
      //   return;
      // }
    }
  }
};
</script>

<style>
.consignee {
  height: 60px;
  background: #fff;
  line-height: 60px;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 80px;
}
.conbox {
  margin-top: 15px;
}
.consigneeInfo > span,
.consignee > span {
  margin-right: 15px;
  font-size: 23px;
  color: #bbb8b8;
}
.itemName .iconfont {
  font-size: 23px;
  margin-right: 5px;
  position: relative;
  top: 2px;
  color: #ccc;
}
.itemName {
  float: left;
  margin-left: 24px;
  color: #7d7a7a;
}
.xq {
  float: right;
}
.myMallOrderDiviceLine .iconfont {
  font-size: 28px;
  text-align: center;
  display: flex;
  justify-content: center;
  color: #3285ff;
}
.consigneeInfo {
  height: 60px;
  background: #fff;
  line-height: 60px;
  overflow: hidden;
  border-bottom: 1px solid #ecebeb;
}
.mallItemText {
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: center;
}
.myMallOrderDiviceLine {
  display: flex;
  padding-top: 10px;
  height: 80px;
  background: #fff;
}
.myMallOrderDiviceLine > div {
  flex-grow: 1;
}
.myMallOrderLine {
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  border-bottom: 1px #ece7e7 solid;
  cursor: pointer;
  color: #bbb8b8;
  background: #fff;
}
.memberBasicInfo {
  height: 87px;
  border-bottom: none;
  border-top: none;
  padding-top: 1px;
  position: relative;
  padding: 0 0 0 20px;
  background: linear-gradient(left, #56c4e7, #3285ff);
  margin-bottom: 15px;
}
#memberHeadPic {
  width: 46px;
  height: 46px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
}
.icon-pnameIcon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(256, 256, 256, 0.6);
  position: relative;
  vertical-align: bottom;
  top: 14px;
}
.memberBasicInfo .memberName {
  display: block;
  float: none;
  font-size: 16px;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memberBasicInfo .memberLevelName {
  display: block;
  float: none;
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 42px;
  left: 85px;
}
</style>
